<template>
  <div class="detail-container">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form :model="userInfo" :rules="rules" ref="ruleFormRef" label-width="220px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="username">
              <el-input v-model="userInfo.username"></el-input>
            </el-form-item>
            <el-form-item label="工号" prop="workNumber">
              <el-input v-model="userInfo.workNumber" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
              <el-input v-model="userInfo.mobile" :disabled="isEdit"></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="departmentId">

              <SelectTree v-model="userInfo.departmentId" />

            </el-form-item>
            <el-form-item label="聘用形式" prop="formOfEmployment">
              <el-select v-model="userInfo.formOfEmployment" style="width:100%" placeholder="请选择活动区域">
                <el-option label="正式" value="1"></el-option>
                <el-option label="非正式" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职时间" prop="timeOfEntry">
              <el-date-picker type="date" format="yyyy年M月dd日" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="userInfo.timeOfEntry" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="转正时间" prop="correctionTime">
              <el-date-picker type="date" format="yyyy年M月dd日" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="userInfo.correctionTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="员工头像" prop="">
              <imgUpload :img.sync="userInfo.staffPhoto" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">{{isEdit ? '编辑' : '添加'}}</el-button>

            </el-form-item>
          </el-form>
        </div>
      </el-col>

    </el-row>

  </div>
</template>
<script>

import SelectTree from "./components/select-tree.vue";
import imgUpload from "./components/imgUpload.vue";

import { addEmployeeRequest, getEmployeeInfoByIdRequest, updateEmployeeInfoByIdRequest } from "@/api/employee";
export default {
  name: '',
  components: {
    SelectTree,
    imgUpload
  },
  data () {
    const valideCorrectionTime = (_, value, callback) => {
      //new Date(this.ruleForm.timeOfEntry).getTime()入职时间戳
      //new Date(value).getTime()转正时间戳
      if (new Date(value).getTime() <= new Date(this.userInfo.timeOfEntry).getTime()) {
        callback(new Error('转正时间要大于入职时间'))
        return
      }
      callback()
    }
    return {
      userInfo: {
        username: '', // 用户名
        mobile: '', // 手机号
        workNumber: '', // 工号
        formOfEmployment: null, // 聘用形式
        departmentId: null, // 部门id
        timeOfEntry: '', // 入职时间
        correctionTime: '', // 转正时间
        staffPhoto: ''//图片
      },
      options: [],

      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 4, message: '姓名只能输入1-4个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[345678][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'blur' },
        ],
        formOfEmployment: [
          { required: true, message: '请选择聘用形式', trigger: 'blur' },
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' },
        ],
        correctionTime: [
          { required: true, message: '请选择转正时间', trigger: 'blur' },
          { validator: valideCorrectionTime, trigger: 'blur' }
        ],
      }
    }
  },
  created () {
    //有id就是编辑,就发送请求 回显数据
    if (this.isEdit) {
      this.getEmployeeInfoById()
    }
  },
  computed: {
    isEdit () {
      if (this.$route.params.id) {
        return true
      }
      return false
    }
  },
  methods: {
    //获取-员工-基本信息 回显
    async getEmployeeInfoById () {
      const res = await getEmployeeInfoByIdRequest(this.$route.params.id)
      this.userInfo = res.data
    },

    submitForm (formName) {
      this.$refs.ruleFormRef.validate(async (valid) => {
        if (valid) {
          if (this.isEdit) {
            //编辑
            await updateEmployeeInfoByIdRequest(this.userInfo)
          } else {
            //新增
            await addEmployeeRequest(this.userInfo)
          }
          this.$router.push('/employee')
        }
      });
    },
  }
}
</script>
<style lang='scss'  scoped>
.detail-container {
  padding: 20px;
  .el-form {
    width: 500px;
  }
}
</style>
